<template>
  <van-popup v-model="mShow" round position="bottom" v-if="song" class="song-popup">
    <div class="inner">
      <card :image='song.picUrl'
            :imageWidth='60'
            :imageHeight='60'
            :title='title'
            :subTitle='song.singers'
            direction='row'
      ></card>
      <van-divider />
      <van-cell v-for="(menu, index) of menus" :key="index" @click="clickItem(menu)">
        <template #title>
          <i class="iconfont" :class="menu.icon" />
          <span class="custom-title">{{ menu.text }}</span>
          <!-- <van-tag v-if="menu.tag && song.isVip" plain type="danger">{{ menu.tag }}</van-tag> -->
        </template>
      </van-cell>
    </div>
  </van-popup>
</template>
<script>
import Card from 'base/card'

export default {
  components: {
    Card
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    song: {
      type: Object
    }
  },
  mounted() {
  },
  data() {
    return {
      mShow: this.show,
      menus: [
        {
          icon: 'icon-bofang1',
          text: '播放下一首',
          type: 'play'
        },
        {
          icon: 'icon-wenjianjiatianjia',
          text: '收藏到歌单',
          type: 'collect'
        },
        {
          icon: 'icon-xiazai',
          text: '下载',
          tag: 'Vip',
          type: 'download'
        },
        {
          icon: 'icon-pinglun',
          text: '评论',
          type: 'comment'
        },
        {
          icon: 'icon-geshou',
          text: '歌手',
          type: 'singer'
        },
        {
          icon: 'icon-zhuanji-',
          text: '专辑',
          type: 'album'
        },
        {
          icon: 'icon-bofangshu',
          text: '相关视频',
          type: 'video'
        }
      ]
    }
  },
  methods: {
    close() {
      this.mShow = false
    },
    clickItem(menu) {
      this.close()
      this.$emit('clickItem', menu.type)
    }
  },
  computed: {
    title() {
      return `歌曲: ${this.song.name}`
    },
    commentCount() {
      return this.song.name
    }
  },
  watch: {
    show(value) {
      this.mShow = value
      if (value && this.song) {
        this.menus[4].text = this.song.artists.map(item => item.name).join('/')
      }
    },
    mShow(value) {
      this.$emit('update:show', value)
    }
  }
}
</script>
<style lang="less" scoped>
.song-popup{
  .inner{
    padding: 10px;
  }
  .iconfont{
    font-size: 1em;
    margin-right: 5px;
  }
}
</style>